html,body{ margin: 0; font-family: "Microsoft YaHei"; background-color: #CCC } a{ text-decoration: none; } .clearfix:after { content: " "; display: block; clear: both; height: 0; } .clearfix { zoom: 1; } .pr { position: relative; } .pa { position: absolute; } .go{ border-radius: 50%; position: relative; } .go:after{ content:""; display: block; width: 33%; height: 33%; position: absolute; } /*Header*/ .header{ width: 1280px; margin: 0 auto; position: relative; z-index: 1; background-color: #FFF } .header .logo{ width: 1280px; height: 116px; background: url(../images/logo.jpg) no-repeat; background-position: 60px 30px; } .header .buttons{ position: absolute; top: 40px; right: 60px; } .header .buttons .chome{ display: inline-block; color: #FFF; background: rgba(24,118,173,0.6) url(../images/icon1.png) no-repeat; background-position: 15px 10px; font-size: 16px; line-height: 38px; padding: 0 15px 0 45px; } .header .buttons .searchbor{ display: inline-block; line-height: 36px; height: 36px; border: 1px solid rgba(154,154,154,0.55); background: url(../images/icon2.png) no-repeat; background-position: 15px 8px; padding: 0 15px 0 45px; } .header .buttons .search{ font-size: 16px; border: none; width: 80px; color: #C2C2C2; transition:0.5s ease; } .header .buttons .search:focus{ width: 120px; } .header .buttons .search::placeholder{ color: #C2C2C2; } .header .buttons .search::-webkit-placeholder{ color: #C2C2C2; } .header .buttons .search::-ms-input-placeholder{ color: #C2C2C2; } .header .nav{ background: #1876AD; text-align: center; font-size: 0px; } .header .nav a{ display: inline-block; color: #FFF; font-size: 20px; width: 192px; height: 50px; line-height:50px; font-weight: lighter; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2); margin-right: -1px; } .header .nav a.active{ background-color: #32ACD4; position: relative; } .header .nav a.active:before{ content: ""; display: block; position: absolute; width: 192px; height: 50px; padding: 0 30px; margin-left: -30px; z-index: 1; background: linear-gradient(to right,rgba(0,36,92,0),rgba(0,50,136,0.3) 30px, transparent 30px),linear-gradient(to left,rgba(0,36,92,0),rgba(0,50,136,0.3) 30px, transparent 30px); } .header .nav a.active:after{ content: ""; display: block; position: absolute; width: 20px; height: 20px; background: #32ACD4; bottom: -10px; left: 50%; margin-left: -10px; transform: rotate(45deg); } /*Header*/ /*Footer*/ #footer { width: 100%; min-width: 1280px; height: 195px; display: block; } .footer{ width: 100%; min-width: 1280px; background-color: #414141; } .footer .row1{ background-color: #414141; width: 1158px; margin: 0 auto; padding: 30px 0; } .footer .logo{ float: left; width: 86px; height: 77px; background: url(../images/uibe.png); margin-right: 36px; } .footer .address{ float: left; font-size: 14px; color: rgba(255,255,255,0.43); line-height: 26px; } .footer .info{ float: right; display: none; } .footer .icons{ margin-bottom: 22px; } .footer .icons div{ float: left; background-image: url(../images/icons.png); height: 31px; } .footer .wb{ width: 36px; background-position: 0px 0px; margin-right: 20px; } .footer .twb{ width: 30px; background-position: -36px 0px; margin-right: 20px; } .footer .qq{ width: 28px; background-position: -66px 0px; margin-right: 20px; } .footer .wx{ width: 35px; background-position: -94px 0px; } .footer .url,.footer .url a{ font-size: 16px; color: rgba(255,255,255,0.6); } .footer .url span{ margin: 0 28px; } .footer .row2{ background-color: #282828; font-size: 14px; color: rgba(255,255,255,0.6); text-align: center; height: 57px; line-height: 57px; } /*Footer*/ .cline .b{ background-color: #78B1CA; } .cline .r{ background-color: #E98A90; } .cline .y{ background-color: #EAC23C; } /*pagetitle*/ .pagetitle { width: 1200px; height: 72px; background-color: #00396D; margin: 0 auto; border-bottom: 4px solid #C9DAE6; font-size: 30px; font-weight: lighter; padding-left: 80px; position: relative; color: #FFF; line-height: 72px; } .pagetitle .pagenav { position: absolute; font-size: 14px; line-height: 16px; top: 36px; right: 64px; } .pagetitle .pagenav span { font-size: 24px; vertical-align: -3px; margin: 0 3px; } .body { width: 1280px; margin: 0 auto; padding-top: 25px; padding-bottom: 70px; background-color: #FFF } .body .leftnav { width: 191px; float: left; margin-left: 57px; } .body .leftnav .item{ display: block; font-size: 20px; text-align: center; color: #FFF; cursor: pointer; padding: 18px 0; background-color: #98A1AB; border-bottom: 1px #B7BEC5 solid; } .body .leftnav .item:last-of-type { border-bottom: none; } .body .leftnav .item .out{ display: none; width: 39px; height: 39px; background-color: #FFF; background-color: rgba(255,255,255,0.15); border-radius: 50%; top: 50%; margin-top: -20px; right: -20px; } .body .leftnav .item .go{ width: 23px; height: 23px; background-color: #E34E35; top: 8px; left: 8px; } .body .leftnav .item .go:after{ border-top: 3px solid #FFF; border-right: 3px solid #FFF; transform: rotate(45deg); top: 6px; left: 4px; } .body .leftnav .item.active{ color: #000; background-color: #F2A71C; } .body .leftnav .item.active .line,.body .leftnav .item.active .out{ display: block; } .body .right { width: 912px; margin-right: 63px; float: right; } .body .right .type { font-size: 26px; color: #3F3F3F; height: 35px; } .body .right .line{ width: 912px; height: 3px; margin-top: 8px; margin-bottom: 35px; } .body .right .line .c1{ width: 32px; height: 3px; background-color: #78B1CA; margin-right: 3px; float: left; } .body .right .line .c2{ width: 32px; height: 3px; background-color: #E98A90; margin-right: 3px; float: left; } .body .right .line .c3{ width: 32px; height: 3px; background-color: #EAC23C; margin-right: 3px; float: left; } .body .right .line .l{ width: 807px; height: 2px; border-bottom: 1px solid #CECECE; float: left; }